<template>
  <div>
    <van-nav-bar title="我的费率">
      <img
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        slot="left"
        @click="leftClick"
        alt=""
      />
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="myrate">
        <div class="myrate-left">
          <img :src="getImgUrl(userInfo.grade)" width="60" height="60" alt="" />
          <div class="myrate_const">
            <p class="myrate_name">{{ userInfo.realname }}</p>
            <div class="myrate_phone">
              <img
                src="~assets/image/myrate_phone.png"
                width="12"
                height="15"
                alt=""
              />
              <span>{{ userInfo.phone }}</span>
            </div>
          </div>
        </div>
        <div class="myrate-right">
          <img
            src="../../assets/image/myrate_grade.png"
            width="15"
            height="15"
            alt=""
          />
          <p class="myrate_grade">{{ userInfo.gradeName }}</p>
        </div>
      </div>
      <van-tabs
        v-model="active"
        background="#efefef"
        color="#000"
        title-active-color="#000"
        title-inactive-color="#666"
      >
        <van-tab title="代还费率">
          <div class="items">
            <p>通道名称</p>
            <p>代还费率</p>
            <p>单笔限额</p>
          </div>
          <div class="item" v-for="item in huanList" :key="item.id">
            <p>{{ item.name + item.channelParams }}</p>
            <p>{{ getMyRate(item.rate) }}</p>
            <p>{{ item.singleMinLimit }}-{{ getMoeny(item.singleMaxLimit) }}</p>
          </div>
        </van-tab>
        <van-tab title="刷卡费率">
          <div class="items">
            <p>通道名称</p>
            <p>刷卡费率</p>
            <p>单笔限额</p>
          </div>
          <div class="item" v-for="(item1, index) in kaList" :key="index">
            <p>{{ item1.name + item1.channelParams }}</p>
            <p>{{ getMyRate(item1.rate) }}</p>
            <p>
              {{ item1.singleMinLimit }}-{{ getMoeny(item1.singleMaxLimit) }}
            </p>
          </div>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>
<script>
import {
  queryUserInfoApi,
  queryChannelInfoByUserIdApi,
} from "../../network/ApiServe";
export default {
  created() {
    this.token = localStorage.getItem("token");
    this.userId = localStorage.getItem("userId");
  },

  data() {
    return {
      isLoading: false,
      userInfo: {},
      active: 0,
      huanList: [],
      kaList: [],
      imgurl: [
        { grade: 0, img: require("assets/image/icon_all_wdtg_0.png") },
        { grade: 1, img: require("assets/image/icon_all_wdtg_1.png") },
        { grade: 2, img: require("assets/image/icon_all_wdtg_2.png") },
        { grade: 3, img: require("assets/image/icon_all_wdtg_3.png") },
        { grade: 4, img: require("assets/image/icon_all_wdtg_4.png") },
        { grade: 5, img: require("assets/image/icon_all_wdtg_5.png") },
        { grade: 6, img: require("assets/image/icon_all_wdtg_6.png") },
        { grade: 7, img: require("assets/image/icon_all_wdtg_7.png") },
        { grade: 8, img: require("assets/image/icon_all_wdtg_8.png") },
        { grade: 9, img: require("assets/image/icon_all_wdtg_9.png") },
        { grade: 10, img: require("assets/image/icon_all_wdtg_10.png") },
      ],
    };
  },
  mounted() {
    this.getUserInfo();
    this.getMyRateInfo();
  },
  methods: {
    onRefresh() {
      setInterval(() => {
        this.isLoading = false;
        this.getUserInfo();
        this.getMyRateInfo();
      }, 1000);
    },
    getImgUrl(grade) {
      if (this.imgurl[grade].grade == grade) {
        return this.imgurl[grade].img;
      }
    },
    leftClick() {
      this.$router.back(-1);
    },
    // 百分率
    getMyRate(myrate) {
      return (myrate * 100).toFixed(2) + "%";
    },
    // 元转万
    getMoeny(money) {
      if (money.toString().length >= 5) {
        if (money.toString().substring(money.toString().length - 4) == "0000") {
          return (
            money.toString().substring(0, money.toString().length - 4) + "万"
          );
        } else {
          return (money / 10000).toFixed(2) + "万";
        }
      }
      return money;
    },
    getUserInfo() {
      queryUserInfoApi(this.token)
        .then((res) => {
          console.log("userInfo", res);
          if ((res.resp_code = "000000")) {
            this.userInfo = res.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getMyRateInfo() {
      queryChannelInfoByUserIdApi(this.userId)
        .then((res) => {
          console.log(res);
          if (res.resp_code == "000000") {
            if (res.result != null) {
              res.result.filter((item) => {
                if (item.subName === "还款") {
                  this.huanList.push(item);
                }
                if (
                  item.name != "余额购买" &&
                  item.name != "金币购买" &&
                  item.subName != "支付宝" &&
                  item.subName != "微信"
                ) {
                  this.kaList.push(item);
                  (item.rate * 100).toFixed(2) + "%";
                }
              });
            }
          }
          console.log("huanList", this.huanList);
          console.log("kaList", this.kaList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getrate(rate) {
      return rate * 100 + "%";
    },
  },
};
</script>

<style scoped>
div.myrate {
  background-image: url("~assets/image/img_myrate_bg.png");
  background-size: 100%;
  /* background-repeat: no-repeat;
  background-position: center; */
  width: 343px;
  height: 180px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}
.myrate-left {
  display: flex;
  margin-top: inherit;
  margin-left: 15px;
  font-size: 13px;
  color: #8d8d8d;
}
.myrate-right {
  display: flex;
  align-items: flex-end;
  margin-bottom: inherit;
  margin-right: 15px;
}
.myrate_name {
  margin-top: 10px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 16px;
}
.myrate_grade {
  font-size: 13px;
  color: #f1ce8a;
}
.items {
  display: flex;
  color: #121212;

  background: #fff;
  margin: 10px 20px;
  padding: 10px 0;
  border-radius: 12px 12px 0 0;
}
.items p {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.item {
  display: flex;
  color: #616161;
  margin: 10px 20px;
  font: 12px;
}
.item p {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
.myrate_const {
  margin-left: 10px;
}
.myrate_phone {
  vertical-align: auto;
}
</style>
